*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    height: 100%;
}
body{
    height: 100%;
    font-size: 0;
}
a{
    text-decoration: none;
}
nav{
    padding: 10px 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
}
.logo{
    width: 990px;
    height: 60px;
    padding: 10px 0;
    margin:0 auto;
    position: relative;
}
.logo>span{
    display: inline-block;
    width: 110px;
    height: 40px;
    margin-left: 5px;
    background-image: url('https://misc.360buyimg.com/user/passport/1.0.0/css/i/l-icon.png');
}
.logo a{
    font-size: 0.8rem;
    color: #ccc;
    position: absolute;
    bottom: 0;
    right: 0;
}
nav a:hover,.attention a:hover{
    color: red;
    text-decoration: underline;
}
.logo a span{
    display: inline-block;
    width: 18px;
    height: 14px;
    margin: 0 5px;
    background: url('http://misc.360buyimg.com/user/passport/1.0.0/css/i/q-icon.png') no-repeat;
    vertical-align: middle;
}
.attention{
    width: 100%;
    height: 38px;
    padding: 10px 0;
    margin-top: 20px;
    line-height: 18px;
    text-align: center;
    background-color: #fff8f0;
    color: #ffa258;
    font-size: 0.8rem;
}
.attention span{
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-image: url('https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/icon-tips.png');
    position: relative;
    top: 3px;
}
.attention a{
    color: #666;
}
.main{
    width: 100%;
    height: 475px;
    background-color: #e93854;
}
.main .content{
    width: 990px;
    margin: 0 auto;
    height: 100%;
    background-image: url('https://img13.360buyimg.com/da/jfs/t2749/276/1020747574/33213/870500f1/5731485aN1134b4f0.png');
    background-color: #e93854;
    position: relative;    
}
.login{
    width: 344px;
    height: 399px;
    background-color: white;
    position: absolute;
    right: 0;
    top: 35px;
}
.login_tag{
    display: inline-block;
    width: 50%;
    height: 55px;
    border-bottom: 1px solid #eee;
}
.login_tag a{
    display: inline-block;
    margin-top: 18px;
    line-height: 18px;
    width: 100%;
    height: 18px;
    font-size: 1.2rem;
    color: black;
    text-align: center;
}
.login_tag a:nth-child(1){
    border-right: 1px solid #eee;
}
.active_tag{
    color: red !important;
}
.log_code,.log_account{
    width: 100%;
    height: 293px;
    position: absolute;
    top: 55px;
}
.prcode{
    display: inline-block;
    position: absolute;
    top: 30px;
     left: 85px; 
    margin-bottom: 20px;
    width: 173px;
    height: 165px;
    padding: 9px 13px;
    border: 1px solid #eee; 
}
.scan{
    width: 141px;
    height: 168px;
    background: url(//misc.360buyimg.com/user/passport/1.0.0/css/i/phone-orange.png) no-repeat;
    z-index: 99;
    position: absolute;
    top: 30px;
    right: 10px;
    display: none;
}
.log_code p{
    text-align: center;
    font-size: 0.8rem;
    color: #666;
    width: 100%;
    position: absolute;
    top: 215px;
}
.log_code p a{
    color: red;
}
.log_code p a:hover{
    text-decoration: none;
}
.log_code p span{
    margin-left: 10px;
}
.log_code ul{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 245px;
}
.log_code ul li{
    font-size: 0.8rem;
    color: #ccc;
    display: inline-block;
    margin:0 8px;
}
.log_code ul li span{
    margin-right: 3px;
    vertical-align: middle;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url('http://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/qr-coagent.png') no-repeat    
}
.log_code ul li:nth-child(2) span{
    background-position: -27px;
}
.log_code ul li:nth-child(3) span{
    background-position: -54px;
}
.log_account{
    padding: 0 20px;
    display: none; 
}
.user,.password,.submit,.log_account p{
    width: 304px;
    text-align: center;
    position: absolute;
    left: 20px;
}
.user{
    top: 40px;
}
.password{
    top: 108px;
}
.submit{
    bottom: 40px;
}
.log_account p{
    bottom: 103px;
    text-align: right;
}
.user label{
    position: absolute;
    left: 0;
    background: url(//misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/pwd-icons-new.png) no-repeat;
    width: 38px;
    height: 38px;
    border: 1px solid #bdbdbd;    
}
#userName,#password{
    width: 266px;
    height: 38px;
    position: absolute;
    left: 38px;
    border: 1px solid #bdbdbd;
    border-left: none;
    padding: 10px 0 10px 12px;
}
.password label{
    position: absolute;
    left: 0;
    background: url(//misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/pwd-icons-new.png) no-repeat;
    background-position: -48px 0;
    width: 38px;
    height: 38px;
    border: 1px solid #bdbdbd;  
}
.log_account p a{
    font-size: 0.8rem;
    color: #666;
}
.log_account p a:hover{
    color: red;
    text-decoration: underline;
}
.submit button{
    width: 100%;
    height: 33px;
    text-align: center;
    background-color: #e4393c;
    color: white;
    line-height: 33px;
    font-size: 1rem;
    border: none;
}
.log_other{
    width: 100%;
    height: 51px;
    background-color: #FCFCFC;
    border-top: 1px solid #eee;
    position: absolute;
    bottom: 0;
    padding: 0 20px;
}
.log_other>div{
    display: inline-block;
    width: 50%;
}
.wx_qq {
    color: #666;
    font-size: 0.6rem;
}
.wx_qq a{
    display: inline-block;
    width: 48px;
    height: 50px;
    font-size: 0.6rem;
    line-height: 50px;
    color: #666;
}
.wx_qq a span{
    display: inline-block;
    width: 19px;
    height: 18px;
    background-image: url('https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/QQ-weixin.png');
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 3px;
}
.QQ{
    margin-right: 5px;
}
.wx{
    margin-left: 5px;
}
.wx span{
    background-position: -20px 0;
}
.go_register{
    text-align: right;
}
.go_register a{
    font-size: 0.8rem;
    color: #B61D1D;
}
.go_register a span{
    position: relative;
    top: 3px;
    margin-right: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(//misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/pwd-icons-new.png) -104px -75px no-repeat
}
.links{
    text-align: center;
    margin-top: 20px;
}
.links a{
    font-size: 0.6rem;
    color: #999;
    display: inline-block;
    width: 90px;
    height: 14px;
    padding: 0 5px;
    border-right: 1px solid #999;
}
.links a:last-child{
    border-right: none;
}
.footer p{
    margin-top: 20px;
    font-size: 0.6rem;
    color: #999;
    text-align: center;
}